<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>input[type="text"], ValidityState.tooShort and user editing</title>
    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
    <link rel="help" href="https://html.spec.whatwg.org/multipage/#setting-minimum-input-length-requirements:-the-minlength-attribute">
    <meta name="flags" content="interact">
    <meta name="assert" content="Per the 'Constraint validation' definition in the referenced section, an input whose value was edited by the user but still falls below the input's minlength should suffer from being too short.">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
  </head>
  <body>
    <p>Type one additional character into the following text input:</p>
    <input type="text" value="1234" minlength="10" autocomplete="off" id="testinput">

    <div id="log"></div>
    <script>
var input = document.getElementById('testinput');
setup({explicit_timeout: true, explicit_done: true});
on_event(input, "input", function () {
  test(function() {
    assert_class_string(input.validity, 'ValidityState', 'HTMLInputElement.validity must be a ValidityState instance');
    assert_true(input.validity.tooShort, "tooShort must be true since the user just changed the input's value and the value falls below the minlength");
  });
  done();
});
    </script>
  </body>
</html>
